<template>
	<view v-if="info!=''" class="content wdh-100 columnbox">
		<swiper class="swiper_box" indicator-dots>
			<swiper-item v-for="(item,index) in info.image.split(',')" :key='index'>
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="columnbox wdh-100 pad_32 line-box">
			<view class="wdh-100 rowbox jus price_box">
				<text>¥</text>
				<view>{{info.price.toFixed(2)}}</view>
			</view>
			<view class="name">{{info.name}}</view>
		</view>
		<view class="columnbox wdh-100 pad_32">
			<view class="rowbox wdh-100 introduce_title als">
				<view @click="curTag=item" class="columnbox" style="margin: 0 40rpx;" v-for="(item,index) in tagList"
					:key='index'>
					<view>{{item}}</view>
					<view class="def-bgcol tab_line" v-if="item==curTag"></view>
				</view>
			</view>
			<template v-if="curTag=='药品介绍'">
				<view class="rowbox wdh-100 spb r_box border_top">
					<view class="rowbox t_box">处方药</view>
					<view class="rowbox v_box">{{info.chufangyao}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">通用名称</view>
					<view class="rowbox v_box">{{info.short}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">规格</view>
					<view class="rowbox v_box">{{info.guige}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">单位</view>
					<view class="rowbox v_box">{{info.kynuit}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">生产厂家</view>
					<view class="rowbox v_box">{{info.changjia}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">适应症</view>
					<view class="rowbox v_box">{{info.indications}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">用法用量</view>
					<view class="rowbox v_box">{{info.yongfa}}</view>
				</view>
			</template>
			<template v-else>
				<view class="rowbox wdh-100 spb r_box border_top">
					<view class="rowbox t_box">成分</view>
					<view class="rowbox v_box">{{info.chengfen}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">性状</view>
					<view class="rowbox v_box">{{info.xingzhuan}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">适应症</view>
					<view class="rowbox v_box">{{info.indications}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">规格</view>
					<view class="rowbox v_box">{{info.guige}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">用法用量</view>
					<view class="rowbox v_box">{{info.yongfa}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">剂型</view>
					<view class="rowbox v_box">{{info.jixing}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">不良反应</view>
					<view class="rowbox v_box">{{info.blfy}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">禁忌</view>
					<view class="rowbox v_box">{{info.jinji}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">注意事项</view>
					<view class="rowbox v_box">{{info.zhuyi}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">药物相互作用</view>
					<view class="rowbox v_box">{{info.ywhxzy}}</view>
				</view>
				<view class="rowbox wdh-100 spb r_box">
					<view class="rowbox t_box">药物毒性</view>
					<view class="rowbox v_box">{{info.duxing}}</view>
				</view>
			</template>
		</view>
		<view style="width: 100%;height: 20rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				info: '',
				tagList: ['药品介绍', '药品说明书'],
				curTag: '药品介绍'
			};
		},
		onLoad(options) {
			this.id = options.id * 1
			this.getDetail()
		},
		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中'
				})
				this.$req.post('/doctor/medicineinfo', {
					id: this.id
				}).then(res => {
					uni.hideLoading()
					this.info = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
	}

	.swiper_box {
		height: 700rpx;
		width: 100%;

		image {
			width: 750rpx;
			height: 700rpx;
		}
	}

	.pad_32 {
		padding: 0 32rpx;
	}

	.price_box {
		color: #e00005;
		font-weight: bold;
		font-size: 40rpx;
		margin-top: 20rpx;

		text {
			font-size: 28rpx;
			margin-top: 5rpx;
			margin-right: 5rpx;
		}
	}

	.name {
		margin-top: 20rpx;
		width: 100%;
		font-size: 28rpx;
	}

	.line-box {
		border-bottom: #f7f8fa solid 10rpx;
		padding-bottom: 32rpx;
	}

	.introduce_title {
		font-size: 28rpx;
		margin-top: 32rpx;
		color: #000;
		margin-bottom: 32rpx;
	}

	.tab_line {
		margin-top: 10rpx;
		width: 40rpx;
		height: 9rpx;
		border-radius: 100rpx;
	}

	.r_box {
		border: #eaecec solid 1px;
		border-top: none;
	}

	.border_top {
		border-top: #eaecec solid 1px;
	}

	.t_box {
		font-size: 24rpx;
		width: 200rpx;
		justify-content: flex-start;
		padding-left: 20rpx;
		padding: 20rpx;
	}

	.v_box {
		width: calc(100% - 200rpx);
		border-left: #eaecec solid 1px;
		font-size: 24rpx;
		justify-content: flex-start;
		padding: 20rpx;
	}
</style>